<script lang="ts">
  import {tweened} from "svelte/motion";
  import {cubicInOut, linear} from "svelte/easing";

  import * as images from "./background"
  import {onMount} from "svelte";
  import {tracks} from "../../pages/index/stores";

  const steps = tweened(1, {duration: 2000, easing: cubicInOut});

  tracks.currentCar.subscribe((id) => {
    steps.set(0, {duration: 0})
    steps.set(17)
  })
  export let value: number = 0
  export let unit: string = ''
  export let label: string = ''

  const innerValue = tweened(0, {duration: 2000, easing: cubicInOut})
  $: {
    innerValue.set(0, {duration: 0})
    innerValue.set(+value)
  }
</script>

<div class="w-full text-center text-white px-1 overflow-hidden">
  <div class="img w-full flex justify-center" style="background-image: url('{images[`img_${Math.ceil($steps)}`]}')">
    <div class="color-1afcff text-xs 2xl:text-lg 3xl:text-4xl mt-40 truncate">
      {Math.ceil($innerValue) ? Math.ceil($innerValue) : ''}{unit}
    </div>
  </div>
  <div class="color-88b1d0 text-xs xl:text-lg 3xl:text-4xl truncate">{label}</div>
</div>

<style>
  .color-1afcff {
    color: #1afcff;
  }

  .color-88b1d0 {
    color: #88b1d0;
  }

  .mt-40 {
    margin-top: 4%;
  }

  .img {
    aspect-ratio: 158 / 126;
    /*background-image: url("");*/
    background-repeat: no-repeat;
    @apply bg-no-repeat bg-contain;
    /*animation: run 2s 1 step-start;*/
  }

  @keyframes run {
    0% {
      background-image: url("");
    }
    6% {
      background-image: url("");
    }
    12% {
      background-image: url("");
    }
    18% {
      background-image: url("");
    }
    24% {
      background-image: url("");
    }
    29% {
      background-image: url("");
    }
    35% {
      background-image: url("");
    }
    41% {
      background-image: url("");
    }
    47% {
      background-image: url("");
    }
    53% {
      background-image: url("");
    }
    59% {
      background-image: url("");
    }
    65% {
      background-image: url("");
    }
    71% {
      background-image: url("");
    }
    76% {
      background-image: url("");
    }
    82% {
      background-image: url("");
    }
    88% {
      background-image: url("");
    }
    94% {
      background-image: url("");
    }
    100% {
      background-image: url("");
    }
  }

  /*@keyframes run {*/
  /*  0% {*/
  /*    background-position: 0 0;*/
  /*  }*/
  /*  !* 0/17  158 *0*!*/
  /*  6% {*/
  /*    background-position: -158px 0;*/
  /*  }*/
  /*  !* 1/17  158 *1*!*/
  /*  12% {*/
  /*    background-position: -316px 0;*/
  /*  }*/
  /*  !* 2/17  158 *2*!*/
  /*  18% {*/
  /*    background-position: -474px 0;*/
  /*  }*/
  /*  !* 3/17  158 *0*!*/
  /*  24% {*/
  /*    background-position: -632px 0;*/
  /*  }*/
  /*  !* 4/17  158 *0*!*/
  /*  29% {*/
  /*    background-position: -790px 0;*/
  /*  }*/
  /*  !* 5/17  158 *0*!*/
  /*  35% {*/
  /*    background-position: -948px 0;*/
  /*  }*/
  /*  !* 6/17  158 *0*!*/
  /*  41% {*/
  /*    background-position: -1106px 0;*/
  /*  }*/
  /*  !* 7/17  158 *0*!*/
  /*  47% {*/
  /*    background-position: -1264px 0;*/
  /*  }*/
  /*  !* 8/17  158 *0*!*/
  /*  53% {*/
  /*    background-position: -1422px 0;*/
  /*  }*/
  /*  !* 9/17  158 *0*!*/
  /*  59% {*/
  /*    background-position: -1580px 0;*/
  /*  }*/
  /*  !* 10/17  158 *0*!*/
  /*  65% {*/
  /*    background-position: -1738px 0;*/
  /*  }*/
  /*  !* 11/17  158 *0*!*/
  /*  71% {*/
  /*    background-position: -1896px 0;*/
  /*  }*/
  /*  !* 12/17  158 *0*!*/
  /*  76% {*/
  /*    background-position: -2054px 0;*/
  /*  }*/
  /*  !* 13/17  158 *0*!*/
  /*  82% {*/
  /*    background-position: -2212px 0;*/
  /*  }*/
  /*  !* 14/17  158 *0*!*/
  /*  88% {*/
  /*    background-position: -2370px 0;*/
  /*  }*/
  /*  !* 15/17  158 *0*!*/
  /*  94% {*/
  /*    background-position: -2528px 0;*/
  /*  }*/
  /*  !* 16/17  158 *0*!*/
  /*  100% {*/
  /*    background-position: 0 0;*/
  /*  }*/
  /*  !* 17/17  158 *0*!*/
  /*}*/

</style>
